<template>
  <div class="fans-container">
    <!--1. 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div ref="main"
         style="width: 800px;height:600px;"></div>
  </div>
</template>

<script>
// 2.导入
import * as echarts from 'echarts'
export default {
  name: 'FansIndex',
  components: {},
  props: {},
  data () {
    return {}
  },
  computed: {},
  watch: {},
  mounted () { this.initChart() },
  methods: {
    initChart () {
      const myChart = echarts.init(this.$refs.main)
      const option = {
        legend: {
          top: 'bottom'
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: false },
            dataView: { show: false, readOnly: false },
            restore: { show: false },
            saveAsImage: { show: false }
          }
        },
        series: [
          {
            name: 'Nightingale Chart',
            type: 'pie',
            radius: [50, 250],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: [
              { value: 40, name: 'rose 1' },
              { value: 38, name: 'rose 2' },
              { value: 32, name: 'rose 3' },
              { value: 30, name: 'rose 4' },
              { value: 28, name: 'rose 5' },
              { value: 26, name: 'rose 6' },
              { value: 22, name: 'rose 7' },
              { value: 18, name: 'rose 8' }
            ]
          }
        ]
      }
      option && myChart.setOption(option)
    }
  }
  // mounted () {
  //   // 3. 基于准备好的dom，初始化echarts实例
  //   var myChart = echarts.init(this.$refs.main)
  //   // 4. 指定图表的配置项和数据
  //   var option = {
  //     title: {
  //       text: '粉丝量变化，功能待完善'
  //     },
  //     tooltip: {},
  //     legend: {
  //       data: ['粉丝']
  //     },
  //     xAxis: {
  //       data: ['1月', '3月', '5月', '7月', '9月', '11月']
  //     },
  //     yAxis: {},
  //     series: [{
  //       name: '销量',
  //       type: 'bar',
  //       data: [5, 20, 36, 10, 10, 20]
  //     }]
  //   }

  //   // 5. 使用刚指定的配置项和数据显示图表。
  //   myChart.setOption(option)
  // },
}
</script>

<style lang='less' scoped>
</style>
